<template>
	<view>
		<view class="user-info">
			<view class="user-info-content">
				<u-avatar :src="avatar" class="avatar" size="60"></u-avatar>
				<view>
					<view>微信用户</view>
					<view class="user-state">游客</view>
				</view>
			</view>
			<view class="user-btn">
				<u-icon size="16" name="order" color="#ffffff" style="margin-right: 10rpx;"></u-icon>
				个人资料
			</view>
		</view>
		<view style="padding: 20rpx;">
			<view class="school-chat">
				<view style="display: flex;align-items: center;">
					<img src="../../static/images/logo_01.png" alt="" style="width: 100rpx;" />
					<view style="color: #ffffff;">武汉大学校友会</view>
				</view>
				<view style="border: 1px solid #ffffff;color: #ffffff;margin-right: 0;padding: 4rpx 10rpx;font-size: 24rpx;">立即领卡</view>
			</view>
		</view>
		
		<view style="margin-top: 20rpx;">
			<u-row>
				<u-col span="6">
					<view style="text-align: center;border-right: 1px solid #f2f2f2;">
						<view>0</view>
						<view style="margin-top: 20rpx;color: #999;">我的名片夹</view>
					</view>
					
				</u-col>
				<u-col span="6">
					<view style="text-align: center;">
						<view>0</view>
						<view style="margin-top: 20rpx;color: #999;">我的卡包</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="gk-line"></view>
		<view class="list-group">
			<view v-for="(item,index) in list" :key="index" class="list-item">
				<view style="display: flex;align-items: center;">
					<img :src="item.ico" alt="" style="width: 45rpx;margin-right: 20rpx;"/>
					<view>{{item.title}}</view>
				</view>
				<view>
					<u-icon name="arrow-right" size="14" color="#999"></u-icon>
				</view>
			</view>
		</view>
		<view class="gk-line" style="margin-top: 0;"></view>
		<view class="list-group">
			<view v-for="(item,index) in list1" :key="index" class="list-item">
				<view style="display: flex;align-items: center;">
					<img :src="item.ico" alt="" style="width: 45rpx;margin-right: 20rpx;"/>
					<view>{{item.title}}</view>
				</view>
				<view>
					<u-icon name="arrow-right" size="14" color="#999"></u-icon>
				</view>
			</view>
		</view>
		<view class="gk-line" style="margin-top: 0;"></view>
		<view class="list-group">
			<view v-for="(item,index) in list2" :key="index" class="list-item">
				<view style="display: flex;align-items: center;">
					<img :src="item.ico" alt="" style="width: 45rpx;margin-right: 20rpx;"/>
					<view>{{item.title}}</view>
				</view>
				<view>
					<u-icon name="arrow-right" size="14" color="#999"></u-icon>
				</view>
			</view>
		</view>
		<view class="gk-line" style="margin-top: 0;"></view>
		<view class="list-group">
			<view v-for="(item,index) in list3" :key="index" class="list-item">
				<view style="display: flex;align-items: center;">
					<img :src="item.ico" alt="" style="width: 45rpx;margin-right: 20rpx;"/>
					<view>{{item.title}}</view>
				</view>
				<view>
					<u-icon name="arrow-right" size="14" color="#999"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: "../../static/images/ico_100.png",
				list:[
					{title:"我的消息",ico:"../../static/images/xiaoxi.png"},
					{title:"我的名片",ico:"../../static/images/mingpian.png"},
					{title:"档案照片",ico:"../../static/images/danganguanli.png"},
				],
				list1:[
					{title:"我的组织",ico:"../../static/images/jurassic_project.png"},
					{title:"我的活动",ico:"../../static/images/huodong.png"},
					{title:"我的投票",ico:"../../static/images/toupiao.png"},
					{title:"我的相册",ico:"../../static/images/xiangce.png"},
					{title:"我的留言",ico:"../../static/images/liuyan.png"},
				],
				list2:[
					{title:"我的返校预约",ico:"../../static/images/yuyueriqi.png"},
					{title:"我的发布",ico:"../../static/images/fabu-.png"},
				],
				list3:[
					{title:"我要反馈",ico:"../../static/images/yijianfankui.png"},
					{title:"个人资料",ico:"../../static/images/gerenziliao.png"},
					{title:"账号设置",ico:"../../static/images/shezhi.png"},
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.user-info {
		padding: 40rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.avatar {
			margin-right: 20rpx;
		}

		.user-info-content {
			display: flex;
			align-items: center;

			.user-state {
				border: 1px solid #1095db;
				text-align: center;
				border-radius: 40rpx;
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #1095db;
				width: 80rpx;
			}
		}

		.user-btn {
			display: flex;
			align-items: center;
			background: #1095db;
			color: #fff;
			padding: 8rpx 16rpx;
			font-size: 24rpx;
			border-radius: 40rpx;
		}
	}

	.school-chat {
		display: flex;
		align-items: center;
		background: #1095db;
		justify-content: space-between;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.gk-line {
		background: #f2f2f2;
		height: 20rpx;
		margin-top: 30rpx;
	}
	.list-item {
		padding: 30rpx 20rpx;
		border-bottom: 1px solid #f2f2f2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
	}
	.list-group .list-item:last-child {
		border: none;
	}
</style>